import CodeMirror from '@uiw/react-codemirror';
import { monokaiInit } from "@uiw/codemirror-theme-monokai";
import { javascript } from "@codemirror/lang-javascript";
import { sql } from '@codemirror/lang-sql';
import { json } from '@codemirror/lang-json';
const langs = {
  sql,
  json,
  javascript
}
const config = {
  javascript: { jsx: true }
}
const CodeEditor = ({ value, onChange, height, lang, readOnly }) => {
  return (
    <CodeMirror
      readOnly={readOnly}
      value={value}
      height={height}
      extensions={[langs[lang](config[lang])]}
      onChange={onChange}
      theme={monokaiInit({
        settings: {
          background: '#002146',
          gutterBackground: '#002146',
        }
      })}
      lang={lang}
    />);
}

export default CodeEditor;